<template>
<!-- 	<cover-view class="cloum-topbar" :style="{height: `${topbarH}px`}">
		<cover-view class="cloum-header" :style="{height: `${topbarH-statusBarHeight}px`,paddingTop: `${statusBarHeight}px`}">
			<cover-view class="cloum-header-left" v-if="showLeft" @click="taps">
				<cover-image class="header-left-icon" src="../../static/nav_icon.png" mode="aspectFit"></cover-image>
				<cover-view>操作指引</cover-view>
			</cover-view>
			<cover-view class="cloum-header-title">
				{{title}}
			</cover-view>
		</cover-view>
	</cover-view> -->

	<view class="cloum-topbar" :style="{height: `${topbarH}px`}">
		<view class="cloum-header" :style="{height: `${topbarH-statusBarHeight}px`,paddingTop: `${statusBarHeight}px`}">
			<view class="cloum-header-title" :style="{lineHeight: `${topbarH-statusBarHeight-4}px`}">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"c-topbar",
		props: {
			title: {
				type: String,
				default: '店有米' // '凸°'
			},
			showLeft: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				topbarH: 60,
				statusBarHeight: 20
			};
		},
		methods: {
			taps() {
				this.$emit('taps')
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					const { screenHeight, safeArea, statusBarHeight } = e
					let rect = wx.getMenuButtonBoundingClientRect()
					let CustomBar = 0
					if (e.system.toLowerCase().indexOf('ios') > -1) {  
					    CustomBar = rect.bottom + (rect.top - statusBarHeight) * 2
					} else {  
					    CustomBar = statusBarHeight + rect.height + (rect.top - statusBarHeight) * 2
					}
					this.statusBarHeight = statusBarHeight
					this.topbarH = CustomBar
				}
			})
		}
	}
</script>

<style scoped>
.cloum-topbar {
	min-height: 100rpx;
	background-color: #FFF;
	z-index: 999;
}
.cloum-header {
	display: flex;
	justify-content: center;
	/* align-items: center; */
}
/* .cloum-header-left {
	position: absolute;
	left: 36rpx;
	font-size: 28rpx;
	font-weight: bold;
	line-height: 40rpx;
	color: #1678FF;
	display: flex;
} */
/* .header-left-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 6rpx;
} */
.cloum-header-title {
	font-size: 36rpx;
	font-weight: bold;
	line-height: 50rpx;
	color: #121933;
}
</style>
